<template>
	<view class="content">
		<!-- 顶部 -->
		<view class="bg-img flex align-center"
			style="background-image: url('https://pic.imgdb.cn/item/654cf22cc458853aef59999a.jpg');height: 414upx;">
			<view class="padding-xl text-white">
				<view @click="handleMy" class="padding-xs text-xxl text-bold">
					<u-avatar :src="user.avatar" size="60" shape="circle"></u-avatar>
				</view>
				<view class="padding-xs text-lg">
					{{user.nickName}}
				</view>
			</view>
		</view>

		<u-popup :duration="500" :round="10" :show="openShow" @close="close">
			<view style="padding: 40px;">
				<u--form labelPosition="left" :model="userVo" :rules="rules" ref="formRef">
					<u-form-item @click="onChangeAvatar" :labelWidth="50" label="头像" prop="avatar" borderBottom
						ref="avatar">
						<image style="width: 70px; height: 70px; border-radius: 15%; margin-top: 25px;"
							:src="userVo.avatar" />
					</u-form-item>
					<u-form-item :labelWidth="50" label="昵称" prop="nickName" borderBottom ref="nickName">
						<u--input v-model="userVo.nickName" border="none"></u--input>
					</u-form-item>
					<u-form-item :labelWidth="50" label="密码" prop="password" borderBottom ref="password">
						<u--input type="password" v-model="userVo.password" border="none"></u--input>
					</u-form-item>
				</u--form>
				<view style="margin-top: 50px;">
					<view>
						<u-button type="primary" @click="doSubmit" text="提交"></u-button>
					</view>
				</view>
			</view>
		</u-popup>

		<!-- 导航栏点击 -->
		<view class="navgation">
			<view class="card">
				<view class="container">
					<view>
						<text style="font-size: 15px;font-weight: bold;">我的订单</text>
					</view>
					<u-grid :border="false" col="5">
						<u-grid-item @click="toWaitOrder">
							<uni-badge style="margin-top: 10px;" absolute="rightTop" :text="waitOrderCount"
								size="small">
								<u-icon name="bag-fill" color="#ff9900" :size="25"></u-icon>
							</uni-badge>
							<text class="Text">待付款</text>
						</u-grid-item>
						<u-grid-item @click="toWaitDeliver">
							<uni-badge style="margin-top: 10px;" absolute="rightTop" :text="waitDeliverCount"
								size="small">
								<u-icon name="coupon-fill" color="#2979ff" :size="25"></u-icon>
							</uni-badge>
							<text class="Text">待发货</text>
						</u-grid-item>
						<u-grid-item @click="toWaitReceive">
							<uni-badge style="margin-top: 10px;" absolute="rightTop" :text="WaitReceiveCount"
								size="small">
								<u-icon name="car-fill" color="#19be6b" :size="25"></u-icon>
							</uni-badge>
							<text class="Text">待收货</text>
						</u-grid-item>
						<u-grid-item @click="toWaitComment">
							<uni-badge style="margin-top: 10px;" absolute="rightTop" :text="WaitCommentCount"
								size="small">
								<u-icon name="chat-fill" color="#909399" :size="25"></u-icon>
							</uni-badge>
							<text class="Text">待评价</text>
						</u-grid-item>
						<u-grid-item @click="toRefund">
							<uni-badge style="margin-top: 10px;" absolute="rightTop" :text="refundCount" size="small">
								<u-icon name="rmb-circle-fill" color="#fa3534" :size="25"></u-icon>
							</uni-badge>
							<text class="Text">退款/售后</text>
						</u-grid-item>
					</u-grid>
				</view>
			</view>
		</view>

		<!-- 单元格展示 -->
		<view class="cell">
			<view class="card_cell">
				<view class="container">
					<u-cell @click="toHistoryOrder" size="large" title="历史订单" :is-link="true" arrow-direction="right">
						<template #icon>
							<u-icon color="#fcbd71" size="22" name="bag-fill"></u-icon>
						</template>
						<!-- <u-badge count="99" :absolute="false" slot="right-icon"></u-badge> -->
						<template #right-icon>
							<u-icon size="22" name="arrow-right"></u-icon>
						</template>
					</u-cell>
					<u-cell @click="toAddress" size="large" title="收货地址" :is-link="true" arrow-direction="right">
						<template #icon>
							<u-icon color="#71d5a1" size="22" name="map-fill"></u-icon>
						</template>
						<!-- <u-badge count="99" :absolute="false" slot="right-icon"></u-badge> -->
						<template #right-icon>
							<u-icon size="22" name="arrow-right"></u-icon>
						</template>
					</u-cell>
					<u-cell @click="toCollectStore" size="large" title="关注店铺" :is-link="true" arrow-direction="right">
						<template #icon>
							<u-icon color="#fab6b6" size="22" name="heart-fill"></u-icon>
						</template>
						<!-- <u-badge count="99" :absolute="false" slot="right-icon"></u-badge> -->
						<template #right-icon>
							<u-icon size="22" name="arrow-right"></u-icon>
						</template>
					</u-cell>
					<u-cell @click="toCollectGoods" size="large" title="宝贝收藏" :is-link="true" arrow-direction="right">
						<template #icon>
							<u-icon color="#a0cfff" size="22" name="star-fill"></u-icon>
						</template>
						<!-- <u-badge count="99" :absolute="false" slot="right-icon"></u-badge> -->
						<template #right-icon>
							<u-icon size="22" name="arrow-right"></u-icon>
						</template>
					</u-cell>
					<u-cell @click="handleMy" size="large" title="个人中心" :is-link="true" arrow-direction="right">
						<template #icon>
							<u-icon color="#c8c9cc" size="22" name="account-fill"></u-icon>
						</template>
						<template #right-icon>
							<u-icon size="22" name="setting-fill"></u-icon>
						</template>
					</u-cell>
				</view>
			</view>
		</view>

		<!-- 退出登录 -->
		<view class="navgation">
			<view @click="doLogout" class="card_logout">
				<view class="right">
					<view class="btn">
						<text class="grid-text_goods">
							退出登录
						</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		removeToken,
		removeUserInfo
	} from "@/stores/index.js";
	import {
		ref
	} from 'vue';
	import {
		onLoad,
		onTabItemTap,
		onPullDownRefresh
	} from "@dcloudio/uni-app";
	import {
		queryWaitOrderCount
	} from "@/api/order/index.js";
	import {
		queryWaitDeliverCount,
		queryWaitReceiveCount,
		queryWaitCommentCount
	} from "@/api/usergoodslog/index.js";
	import {
		getUserInfo,
		getToken
	} from "@/stores/index.js";
	import {
		queryData,
		updateUserInfo
	} from "@/api/user/index.js";

	const token = getToken();
	const user = getUserInfo();
	onLoad(() => {
		if (token === '') {
			uni.redirectTo({
				url: "/pages/login/login"
			})
		} else {
			getWaitOrderCount();
			getWaitDeliverCount();
			getWaitReceiveCount();
			getWaitCommentCount();
		}
	})

	//下拉刷新请求触发
	onPullDownRefresh(() => {
		getWaitOrderCount();
		getWaitDeliverCount();
		getWaitReceiveCount();
		getWaitCommentCount();
		setTimeout(() => {
			uni.stopPullDownRefresh();
		}, 1500);
	})

	//点击底部导航栏时触发
	onTabItemTap(() => {
		if (token === '') {
			uni.redirectTo({
				url: "/pages/login/login"
			})
		} else {
			getWaitOrderCount();
			getWaitDeliverCount();
			getWaitReceiveCount();
			getWaitCommentCount();
		}
	})


	//获取待付款订单数量
	const waitOrderCount = ref(0);
	const getWaitOrderCount = () => {
		queryWaitOrderCount(user.id).then((res) => {
			if (res.code === 200) {
				waitOrderCount.value = res.data;
			}
		})
	}

	//获取待发货订单数量
	const waitDeliverCount = ref(0);
	const getWaitDeliverCount = () => {
		queryWaitDeliverCount(user.id).then((res) => {
			if (res.code === 200) {
				waitDeliverCount.value = res.data;
			}
		})
	}

	//获取待收货订单数量
	const WaitReceiveCount = ref(0);
	const getWaitReceiveCount = () => {
		queryWaitReceiveCount(user.id).then((res) => {
			if (res.code === 200) {
				WaitReceiveCount.value = res.data;
			}
		})
	}

	//获取待评价订单数量
	const WaitCommentCount = ref(0);
	const getWaitCommentCount = () => {
		queryWaitCommentCount(user.id).then((res) => {
			if (res.code === 200) {
				WaitCommentCount.value = res.data;
			}
		})
	}

	//退款
	const refundCount = ref(0);

	//背景图
	const pic = ref('https://pic.imgdb.cn/item/6512a05cc458853aefe48866.jpg');
	const show = ref(true);
	//跳转到待付款页面
	const toWaitOrder = () => {
		uni.navigateTo({
			url: "/pages/my/waitpay/waitpay"
		})
	}

	//跳转到待发货页面
	const toWaitDeliver = () => {
		uni.navigateTo({
			url: "/pages/my/waitdeliver/waitdeliver"
		})
	}

	//跳转到待收货页面
	const toWaitReceive = () => {
		uni.navigateTo({
			url: "/pages/my/waitreceive/waitreceive"
		})
	}

	//跳转到待评价页面
	const toWaitComment = () => {
		uni.navigateTo({
			url: "/pages/my/waitcomment/waitcomment"
		})
	}

	//跳转到历史订单页面
	const toHistoryOrder = () => {
		uni.navigateTo({
			url: "/pages/my/history/history"
		})
	}

	//跳转到收货地址页面
	const toAddress = () => {
		uni.navigateTo({
			url: "/pages/address/address"
		})
	}

	//跳转到收藏宝贝页面
	const toCollectGoods = () => {
		uni.navigateTo({
			url: "/pages/my/collectgoods/collectgoods"
		})
	}

	//跳转到关注店铺页面
	const toCollectStore = () => {
		uni.navigateTo({
			url: "/pages/my/collectstore/collectstore"
		})
	}

	const toRefund = () => {
		uni.showToast({
			title: "待开发功能！",
			icon: "none"
		})
	}

	const userVo = ref({
		id: null,
		avatar: '',
		nickName: '',
		password: ''
	});
	const openShow = ref(false);
	const handleMy = () => {
		queryData(user.id).then((res) => {
			if (res.code === 200) {
				userVo.value = res.data;
				openShow.value = true;
			} else {
				uni.showToast({
					title: "系统开小差",
					icon: "none"
				})
			}
		})
	}

	const close = () => {
		openShow.value = false;
		userVo.value = {};
	}

	//上传头像方法
	const onChangeAvatar = () => {
		//调用小程序的接口
		uni.chooseImage({
			count: 1,
			success(res) {
				//获取本地路径
				const tempFilePath = res.tempFilePaths[0];
				//文件上传接口
				uni.uploadFile({
					//文件上传请求路径
					url: 'http://192.168.164.131:9600/common/upload',
					filePath: tempFilePath,
					name: 'file',
					success: (res) => {
						if (res.statusCode === 200) {
							uni.showToast({
								title: "上传成功！",
								icon: 'success'
							});
							let avatar = JSON.parse(res.data).data;
							userVo.value.avatar = avatar;
						} else {
							uni.showToast({
								title: "上传头像出现异常",
								icon: 'error'
							})
						}
					}
				})
			}
		})
	}

	//修改用户信息方法
	const doSubmit = () => {
		formRef.value.validate().then((valid) => {
			updateUserInfo(userVo.value).then((res) => {
				if (res.code === 200) {
					uni.showToast({
						title: "修改成功！"
					})
					userVo.value = {};
					removeToken();
					removeUserInfo();
					//清理本地数据
					uni.clearStorageSync();
					setTimeout(() => {
						uni.redirectTo({
							url: "/pages/login/login"
						})
					}, 1000)
				}
			})
		}).catch(err => {
			console.log(err, '校验失败');
		})
	}

	const formRef = ref();
	//校验
	const rules = ref({
		'nickName': {
			type: 'string',
			required: true,
			message: '请填写用户昵称',
			max: 5,
			min: 2,
			trigger: ['blur', 'change'],
		},
		'password': {
			type: 'string',
			required: true,
			message: '请填写用户密码',
			trigger: ['blur', 'change'],
		},
		'avatar': {
			type: 'string',
			required: true,
			message: '请上传用户头像',
			trigger: ['blur', 'change'],
		}
	})

	//退出登录
	const doLogout = () => {
		uni.showModal({
			content: '确认退出?',
			success: res => {
				if (res.confirm) {
					removeToken();
					removeUserInfo();
					//清理本地数据
					uni.clearStorageSync();
					uni.showToast({
						title: "退出成功！"
					})
					setTimeout(() => {
						uni.reLaunch({
							url: "/pages/index/index"
						})
					}, 1000)
				}
			}
		});
	}
</script>

<style scoped lang="scss">
	.content {
		background-color: #F2F6FC;
	}

	.top {
		height: 160px;
	}

	.code {
		margin-top: 10px;
		background-color: #FFFFFF;
		height: 60px;
	}

	.navgation {
		margin-top: 15px;
		background-color: #FFFFFF;
	}

	.cell {
		margin-top: 15px;
		background-color: #FFFFFF;
	}

	.card {
		/* 添加阴影以创建 "card" 效果 */
		box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0);
		transition: 0.3s;
		height: 100px;
	}

	.card_logout {
		display: flex;
		justify-content: center;
		align-items: center;
		box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0);
		transition: 0.3s;
		background-color: #F2F6FC;
	}

	.card_cell {
		/* 添加阴影以创建 "card" 效果 */
		box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0);
		transition: 0.3s;
		height: 280px;
	}

	/* 在卡片容器内添加一些填充 */
	.container {
		padding: 5px;
	}

	.grid-text {
		font-size: 13px;
		color: #909399;
		padding-top: 3px;
		box-sizing: border-box;
	}

	.grid-text_up {
		font-size: 16px;
		color: #303133;
		font-weight: 800px;
		padding-top: 5px;
		box-sizing: border-box;
	}

	.Text {
		font-size: 15px;
		color: #303133;
		padding: 10rpx 0 20rpx 0rpx;
		box-sizing: border-box;
	}

	.right {
		font-size: 28rpx;
		width: 100%;

		.btn {
			line-height: 65px;
			padding: 0 30rpx;
			color: #0F1C2E;
			background-color: #fff;
			display: flex;
			justify-content: center;
		}

		.btn:active {
			background-color: #ecf5ff;
			color: #fff;
		}
	}

	.grid-text_goods {
		font-size: 15px;
		color: #303133;
		font-weight: 600;
		font-family: "华文楷体";
	}

	.uni-badge {
		margin-left: 0px;
	}

	.uni-badge-left-margin {
		margin-left: 0px;
	}

	.uni-badge-absolute {
		margin-left: 0px;
	}
</style>